<template>
  <section class="my-download">
    <van-tabs :active="index" @change="onChange">
      <van-tab v-for="(item,i) in tabs" :title="item.className" :key="i">
        <div class="item flex flex-between flex-middle" v-for="(n,index) in list" :key="index" @click="routerTo(n.productId)">
          <div class="flex">
            <img :src="n.frontImgUrl" alt />
            <div class="flex-col flex-around">
              <div class="title">{{n.productName}}</div>
              <div class="size">{{n.packageSize}}</div>
              <div class="desc">{{n.productTitle}}</div>
            </div>
          </div>
          <button @click.stop="downLoad(n.dowloadUrl)">下载</button>
        </div>
      </van-tab>
    </van-tabs>
  </section>
</template>
<script>
export default {
  data() {
    return {
      index: 0,
      tabs: "",
      pageNum: 1,
      classId: "",
      list: []
    };
  },
  onLoad(e) {
    this.selectClassList();
  },
  onReachBottom(){
    this.selectProductList();
  },
  methods: {
    downLoad(e) {
      wx.setClipboardData({
        data: e,
        success(res) {
            wx.showToast({
                title: '下载地址已复制，请至浏览器进行下载',
                icon: 'none',
                duration: 2000,
                mask: false,
            });
        }
      });
    },
    routerTo(id) {
      wx.navigateTo({ url: "../downloadDetail/main?id=" + id });
    },
    onChange(e) {
      this.classId = this.tabs[e.mp.detail.index].classId;
      this.cleanData();
      this.selectProductList();
    },
    //分类列表
    selectClassList() {
      this.$api.selectClassList().then(res => {
        this.tabs = res.data.classList;
        this.classId = this.tabs[0].classId;
        this.selectProductList();
      });
    },
    //商品列表
    selectProductList() {
      this.$api
        .selectProductList({
          pageNum: this.pageNum,
          pageSize: 10,
          classId: this.classId
        })
        .then(res => {
          if (res.code == 0) {
            this.list = this.list.concat(res.data.productList);
            this.pageNum++;
          }
        });
    },
    //clean
    cleanData() {
      this.list = [];
      this.pageNum = 1;
    }
  }
};
</script>
<style lang="scss" scoped>
.my-download {
  .item {
    background: #f7f7f7;
    margin-bottom: 10px;
    padding: 15px;
    img {
      width: 60px;
      height: 60px;
      margin-right: 15px;
    }
    .title {
      font-size: 15px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 12px;
    }
    .size {
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(161, 164, 172, 1);
    }
    .desc {
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: rgba(161, 164, 172, 1);
    }
    button {
      width: 50px;
      height: 20px;
      background: rgba(255, 248, 237, 1);
      border: 1px solid #fff7ea;
      border-radius: 10px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: rgba(255, 156, 0, 1);
      line-height: 20px;
      padding: 0;
      margin: 0;
    }
  }
}
</style>
<style lang="scss">
.van-tabs__line {
  color: #3bb8fd;
}
</style>
